@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-dark-primary text-text-primary;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    letter-spacing: 0.025em;
    /* 禁止选中文本 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* 允许输入框选中 */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

@layer components {
  /* 卡片样式 */
  .card {
    @apply bg-dark-secondary border border-dark-border rounded-lg shadow-card;
    @apply transition-all duration-300 ease-in-out;
    /* 确保卡片内容不会超出边界 */
    box-sizing: border-box;
    /* 控制最大尺寸，为悬浮动画和边框预留空间 */
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    /* 确保边框不会溢出 */
    border-width: 1px;
  }
  
  .card-hover {
    @apply hover:shadow-card-hover hover:scale-[1.02] hover:border-accent-400/30;
    /* 悬浮时调整容器大小，为放大和边框留出空间 */
    transform-origin: center;
    /* 确保边框在放大时不会超出容器 */
    border-width: 1px;
  }
  
  /* 卡片容器，为悬浮动画和边框预留空间 */
  .card-container {
    @apply relative;
    /* 为悬浮动画和边框预留更多空间 */
    padding: 6px;
    /* 确保容器不会超出父容器 */
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    /* 防止边框溢出 */
    overflow: visible;
  }
  
  /* 玻璃效果 */
  .glass-effect {
    @apply bg-dark-secondary/80 backdrop-blur-md border border-dark-border/50;
  }
  
  /* 渐变背景 */
  .gradient-bg {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  
  /* 文字渐变 */
  .text-gradient {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* 按钮样式 */
  .btn-primary {
    @apply bg-accent-500 text-white px-4 py-2 rounded-lg font-medium;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-accent-400 hover:shadow-lg;
    @apply focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-dark-primary;
  }
  
  .btn-secondary {
    @apply bg-transparent border border-dark-border text-text-primary px-4 py-2 rounded-lg font-medium;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-dark-secondary hover:border-accent-400/50;
    @apply focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-dark-primary;
  }
  
  /* 导航栏样式 */
  .nav-item {
    @apply flex items-center px-4 py-3 rounded-lg transition-all duration-200 ease-in-out;
    @apply text-text-secondary hover:text-text-primary;
  }
  
  .nav-item.active {
    @apply bg-accent-500/20 text-accent-400 border-r-2 border-accent-500;
  }
  
  .nav-item:hover:not(.active) {
    @apply bg-dark-secondary/50;
  }
  
  /* 侧边栏样式 */
  .sidebar {
    @apply bg-dark-nav border-r border-dark-border;
    overflow: hidden;
    transition: width 0.3s ease;
  }
  
  .sidebar-collapsed {
    width: 80px !important;
  }
  
  .sidebar-expanded {
    width: 240px !important;
  }
  
  /* 自定义菜单样式 */
  .custom-menu {
    height: 100%;
  }
  
  .custom-menu .ant-menu-inline {
    height: 100%;
  }
  
  .custom-menu .ant-menu-item {
    margin: 4px 0;
    border-radius: 6px;
  }
  
  .custom-menu .ant-menu-item-selected {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #10B981 !important;
  }
  
  .custom-menu .ant-menu-item:hover {
    background-color: rgba(64, 64, 64, 0.5) !important;
  }
  
  /* 状态指示器 */
  .status-success {
    @apply text-status-success;
  }
  
  .status-error {
    @apply text-status-error;
  }
  
  .status-warning {
    @apply text-status-warning;
  }
  
  .status-info {
    @apply text-status-info;
  }
  
  /* 加载动画 */
  .loading-dots {
    @apply inline-flex space-x-1;
  }
  
  .loading-dots > div {
    @apply w-2 h-2 bg-accent-500 rounded-full animate-pulse;
    animation-delay: calc(var(--i) * 0.1s);
  }
  
  /* 间距工具类 */
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .space-y-8 > * + * {
    margin-top: 2rem;
  }
  
  .space-x-2 > * + * {
    margin-left: 0.5rem;
  }
  
  .space-x-4 > * + * {
    margin-left: 1rem;
  }
  
  .space-x-6 > * + * {
    margin-left: 1.5rem;
  }
  
  /* 文本工具类 */
  .text-gradient {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-dark-primary;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-dark-border rounded-full;
    @apply transition-colors duration-200;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-accent-500/50;
  }
  
  /* 8px栅格系统 */
  .space-8 { gap: 8px; }
  .space-16 { gap: 16px; }
  .space-24 { gap: 24px; }
  .space-32 { gap: 32px; }
  
  /* Antd 组件自定义样式 */
  .ant-card {
    @apply bg-dark-secondary border-dark-border;
    /* 控制卡片最大尺寸，为边框预留更多空间 */
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    box-sizing: border-box;
    /* 确保边框不会溢出 */
    border-width: 1px;
  }
  
  .ant-card-head {
    @apply border-dark-border;
  }
  
  .ant-card-head-title {
    @apply text-text-primary;
  }
  
  .ant-card-body {
    /* 确保卡片内容不会超出边界 */
    box-sizing: border-box;
  }
  
  .ant-input {
    @apply bg-dark-secondary border-dark-border text-text-primary;
  }
  
  .ant-input:focus,
  .ant-input-focused {
    @apply border-accent-500 shadow-none;
  }
  
  .ant-select-selector {
    @apply bg-dark-secondary border-dark-border !important;
  }
  
  .ant-select-selection-item {
    @apply text-text-primary !important;
  }
  
  .ant-tabs-tab {
    @apply text-text-secondary;
  }
  
  .ant-tabs-tab-active {
    @apply text-accent-500;
  }
  
  .ant-tabs-ink-bar {
    @apply bg-accent-500;
  }
  
  .ant-switch-checked {
    @apply bg-accent-500;
  }
  
  .ant-progress-bg {
    @apply bg-accent-500;
  }
  
  .ant-statistic-title {
    @apply text-text-secondary;
  }
  
  .ant-statistic-content {
    @apply text-text-primary;
  }
  
  /* 侧边栏菜单样式 */
  .ant-menu {
    @apply bg-dark-nav border-0;
    overflow: hidden;
  }
  
  .ant-menu-item {
    @apply text-text-secondary hover:text-text-primary;
    @apply transition-all duration-200 ease-in-out;
  }
  
  .ant-menu-item-selected {
    @apply bg-accent-500/20 text-accent-400;
  }
  
  .ant-menu-item:hover {
    @apply bg-dark-secondary/50;
  }
  
  /* 折叠按钮样式 */
  .collapse-btn {
    @apply absolute top-4 right-2 w-8 h-8 rounded-full;
    @apply bg-dark-secondary border border-dark-border;
    @apply flex items-center justify-center;
    @apply text-text-secondary hover:text-accent-500;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-accent-500/10;
  }
  
  /* 表格样式 */
  .ant-table {
    @apply bg-dark-secondary;
  }
  
  .ant-table-thead > tr > th {
    @apply bg-dark-nav border-dark-border text-text-primary;
  }
  
  .ant-table-tbody > tr > td {
    @apply border-dark-border text-text-primary;
  }
  
  .ant-table-tbody > tr:hover > td {
    @apply bg-dark-nav/50;
  }
  
  .ant-table-tbody > tr.ant-table-row-selected > td {
    @apply bg-accent-500/10;
  }
  
  /* 标签样式 */
  .ant-tag {
    @apply border-dark-border;
  }
  
  /* 警告框样式 */
  .ant-alert {
    @apply bg-dark-secondary border-dark-border;
  }
  
  .ant-alert-message {
    @apply text-text-primary;
  }
  
  .ant-alert-description {
    @apply text-text-secondary;
  }
  
  /* 统计数字样式 */
  .ant-statistic-content-value {
    @apply text-text-primary;
  }
  
  .ant-statistic-content-prefix,
  .ant-statistic-content-suffix {
    @apply text-text-secondary;
  }
  
  /* 布局容器样式 */
  .main-content {
    @apply overflow-auto;
    /* 为悬浮动画和边框预留更多空间 */
    padding: 8px;
    margin: -8px;
    /* 确保内容不会超出容器 */
    box-sizing: border-box;
    /* 防止横向滚动条 */
    overflow-x: hidden;
  }
  
  /* 行和列容器 */
  .ant-row {
    /* 确保行容器不会超出父容器 */
    max-width: 100%;
    box-sizing: border-box;
    /* 防止横向溢出 */
    overflow: hidden;
  }
  
  .ant-col {
    /* 确保列容器不会超出父容器 */
    max-width: 100%;
    box-sizing: border-box;
    /* 防止横向溢出 */
    overflow: hidden;
  }
  
  /* 统计卡片容器 */
  .statistic-card {
    /* 为统计卡片预留悬浮空间和边框空间 */
    padding: 6px;
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    box-sizing: border-box;
    /* 允许边框在悬浮时显示 */
    overflow: visible;
    /* 确保不会超出父容器 */
    width: 100%;
    @apply transition-all duration-300 ease-in-out;
  }
  
  /* Dark 主题弹窗样式 */
  .dark-modal .ant-modal-content {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
  }
  
  .dark-modal .ant-modal-header {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid #333 !important;
  }
  
  .dark-modal .ant-modal-title {
    color: #ffffff !important;
  }
  
  .dark-modal .ant-modal-body {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
  }
  
  .dark-modal .ant-modal-close {
    color: #ffffff !important;
  }
  
  .dark-modal .ant-modal-close:hover {
    color: #10b981 !important;
  }
  
  /* Dark 主题时间选择器样式 */
  .dark-timepicker .ant-picker-input > input {
    background-color: #262626 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
  }
  
  .dark-timepicker .ant-picker-input > input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
  }
  
  .dark-timepicker .ant-picker-suffix {
    color: #ffffff !important;
  }

  
  /* Dark 主题 Popconfirm 样式 */
  .dark-popconfirm-overlay .ant-popover-inner {
    background-color: #1f1f1f !important;
    border: 1px solid #333 !important;
  }
  
  .dark-popconfirm-overlay .ant-popover-title {
    color: #ffffff !important;
    border-bottom: 1px solid #333 !important;
  }
  
  .dark-popconfirm-overlay .ant-popover-inner-content {
    color: #ffffff !important;
  }
  
  .dark-popconfirm-overlay .ant-popover-arrow::before {
    background-color: #1f1f1f !important;
    border: 1px solid #333 !important;
  }
  
  /* Dark 主题消息提示样式 */
  .ant-message-notice-content {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
  }
  
  .ant-message-success .ant-message-notice-content {
    border-left: 4px solid #10b981 !important;
  }
  
  .ant-message-error .ant-message-notice-content {
    border-left: 4px solid #ef4444 !important;
  }
  
  .ant-message-warning .ant-message-notice-content {
    border-left: 4px solid #f59e0b !important;
  }
  
  .ant-message-info .ant-message-notice-content {
    border-left: 4px solid #3b82f6 !important;
  }
  
  /* Dark 主题确认框样式 */
  .ant-modal-confirm .ant-modal-confirm-title {
    color: #ffffff !important;
  }
  
  .ant-modal-confirm .ant-modal-confirm-content {
    color: #cccccc !important;
  }
  
  .ant-modal-confirm .ant-modal-confirm-btns .ant-btn {
    background-color: #262626 !important;
    border: 1px solid #404040 !important;
    color: #ffffff !important;
  }
  
  .ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
  }
  
  .ant-modal-confirm .ant-modal-confirm-btns .ant-btn:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
  }
}